<template>
  <view class="contenter">
    <!-- 选择时间 -->
    <view class="u-flex time" >
      <!-- 选择今天明天后天 -->
      <view class="u-flex" >
        <view class="   active_time" v-for="(data,index) in dateList" :class="[data.name===nowWeek?'active_time1':'']" @click="activeChangeTime(data)">
          <view >{{data.name}}</view>
           <view class="u-margin-top-10">{{data.time}}</view>
        </view>

      </view>
    </view>
    <view class="main">
      <!-- 其他 -->
      <view class="item flex-c-s-s" v-for="(data,index) in item_list" :key="index">
        <!-- 标题 -->
        <view class="flex-r-s-c title"  >
          <view class="left"></view>
          <text>{{data.name}}</text>
          <view>{{data.describe}}</view>
        </view>
        <view class="u-flex time_list">
          <view class="time_list_view flex-c-c-c" v-for="(item,index1) in data.tec" :key="index1">
            <text>{{item}}</text>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: "changeTime",
  data(){
    return{
      item_list:[],
      form:{
      },
      active_time:0,
      dateList:[
        {name:'周一',time:''},
        {name:'周二',time:''},
        {name:'周三',time:''},
        {name:'周四',time:''},
        {name:'周五',time:'01-01'},
      ],
      nowWeek:'',
      nowDate:'',
    }
  },
  computed:{

  },
  onLoad(option){
    this.setData()


  },
  //获取今明后
  created(){
    this.getWeekDate()
  },
  methods:{
    getWeekDate() {
      let myDate = new Date()
      let wk = myDate.getDay() //获取星期几,getDay()返回值是 0（周日） 到 6（周六） 之间的一个整数。0||7为7，即weekday的值为1-7
      let weeks = [ '周一', '周二', '周三', '周四', '周五']
      this.nowWeek = weeks[wk-1]
      this.nowDate =  this.timeFliter(myDate) // 今天
      let yy = new Date().getFullYear(); //年
      //周一
        let date1 = new Date()
        date1.setDate(date1.getDate()-wk+1);
        this.timeFliter(date1);
        console.log(date1)
        this.dateList[0].time = this.timeFliter(date1);
      //周二
      let date2 = new Date()
      date2.setDate(date2.getDate()-wk+2);
      this.timeFliter(date2);
      this.dateList[1].time = this.timeFliter(date2);
      //周三
      let date3 = new Date()
      date3.setDate(date3.getDate()-wk+3);
      this.timeFliter(date3);
      this.dateList[2].time = this.timeFliter(date3);
      //周四
      let date4 = new Date()
      date4.setDate(date4.getDate()-wk+4);
      this.timeFliter(date4);
      this.dateList[3].time = this.timeFliter(date4);
      //周五
      let date5 = new Date()
      date5.setDate(date5.getDate()-wk+5);
      this.timeFliter(date5);
      this.dateList[4].time = this.timeFliter(date5);

      this.dateList.forEach(res=>{
        if ( this.nowWeek == res.name){
          res.time =  this.nowDate
          this.form.date =  yy+'-'+res.time
        }
      })
    },
    timeFliter (date) {
      let mm =''; //月
      let dd =''; //日
      if(date.getDate()<10){
        dd = "0"+date.getDate();
      }else{
        dd = date.getDate();
      }
      if(date.getMonth()<9){ //month should +1
        mm = "0" + (date.getMonth()+1);
      }else{
        mm = (date.getMonth()+1);
      }

      return mm+'-'+dd
    },
    //获取时间段
    setData(){
      this.$api.roster({date:this.form.date}).then(res => {
        this.item_list  = res.data
      })
    },

    //选择日期
    activeChangeTime(data){
      let yy = new Date().getFullYear(); //年
      this.nowWeek = data.name
      this.form.date = yy+'-'+data.time
      this.setData()
    },
  },
}
</script>

<style scoped lang="scss">
.main{
  padding: 0 32rpx;

}
.item{
  background: white;
  padding-bottom: 40rpx;
  margin-top: 40rpx;

}
.time{
  width: 100%;
  background-color:#FFFFFF;
  padding: 0 32rpx;
  height: 132rpx;
}
.active_time {
  background: #FFFFFF;
  border: 2rpx solid #E3E3E3;
  border-radius: 8rpx;
  font-size: 28rpx;
  text-align: center;
  font-weight: bold;
  margin-right: 32rpx;
  color: #7B7B7B;
  width: 112rpx;
  height: 100rpx;

}
.title {
  width: 100%;
  height: 96rpx;
  background: #45806E;
  opacity: 1;
  border-radius: 12rpx 12rpx 0px 0px;
  color: white;
  font-size: 28rpx;

  .left {
    height: 36rpx;
    width: 10rpx;
    border-radius: 5rpx;
    background-color: #45806E;
  }

  text {
    -webkit-text-stroke: 1 rgba(0, 0, 0, 0);
    text-stroke: 1 rgba(0, 0, 0, 0);
    margin-left: 15rpx;
    margin-right: 20rpx;
  }
}
.time_list {
  width: 100%;
  height: auto;
  flex-wrap: wrap;

  .activeTime{
    background: #45806E !important;
    color: white;
    border: 2rpx solid #45806E ;
  }
  .man{
    background: #EAEAEA !important;
    border: 2rpx solid #CCCCCC !important;
    color: #7B7B7B!important;
  }

  .time_list_view {
    border-radius: 8rpx;
    position: relative;
    margin-left: 20rpx;
    margin-top: 20rpx;
    width: 148rpx;
    height: 74rpx;
    background: #F5F5F5;
    opacity: 1;
    &:nth-child(4n+0){
      margin-right: 0;
    }

    .is_time {
      position: absolute;
      right: 0;
      top: -13rpx;
      height: 26rpx;
      width: 52rpx;
      background-color: #EAEAEA;
      border-radius: 8rpx;

      text {
        font-size: 20rpx;
        color: #45806E;
      }
    }
  }
}
.active_time1 {
  background: rgba(69, 128, 110, 0.51);
  color: #45806E;
}
.xuan{
  height: 104rpx;
  background: #FFFFFF;
  padding: 0 32rpx;
  position: fixed;
  width: 100%;
  bottom: 0;
  .newtime{
    font-size: 32rpx;
    font-weight: bold;
    color: #272823;
    margin-right: 20rpx;
  }
  .times{
    font-size: 24rpx;
    color: $uni-text-color;
  }
  .submit{
    width: 228rpx;
    height: 72rpx;
    line-height: 72rpx;
    margin: 0;
  }
}

</style>